 <template>
	<view class="box-c d-ac-c">
		<view class="login-list-1 box d-jc-c">
			<image src="../../static/images/login/login_log.png" lazy-load></image>
		</view>
		<view class="box d-jc-c login-list-2">
			<view class="flex-3">
				<text @tap="loginType(2)" :class="accountActive==2 ? 'accountActive' :''">
					账号登录
				</text>
			</view>
			<view class="" style="flex: 0.06;">
			</view>
			<view class="flex-3">
				<text @tap="loginType(1)" :class="accountActive==1 ? 'accountActive' :''">验证码登录</text>
			</view>
		</view>
		<view class="box-c l3">
			<view class="box-c login-list-3">
				<view class="box d-jc-c">
					<view class="box j-end">
						<text class="iconfont iconshoujihao">
						</text>
					</view>
					<view class="box">
						<input v-if="accountActive==2" class="input" placeholder="请填写账号或手机号" @input="phoneInput"
							v-model="parameter.account" />
						<input v-if="accountActive==1" class="input" placeholder="请填写你的手机号" @input="phoneInput"
							v-model="parameter.phone" />
						<text class='input-width'>
							<text class="iconfont iconqingchu" v-show="showPhoneIcon" @click="clearIcon">

							</text>
						</text>

					</view>
				</view>
				<view class="line3"></view>
			</view>
			<view class="box-c login-list-3" v-if="accountActive==2">
				<view class="box d-jc-c">
					<view class="box j-end">
						<text class="iconfont iconmima">
						</text>
					</view>
					<view class="box">
						<input class="input" type="password" placeholder="请填写登录密码" v-model="parameter.password" />
						<text class='input-width'>
							<text class="iconfont iconchakan" @click="catPassword(showPassword)"></text>
						</text>
					</view>
				</view>
				<view class="line3"></view>
			</view>

			<view class="box-c login-list-3" v-if="accountActive==1">
				<view class="box d-jc-c">
					<view class="box j-end">
						<text class="iconfont iconmima">
						</text>
					</view>
					<view class="box">
						<input class="input-code" type="text" placeholder="请填写验证码" v-model="parameter.verification" />

						<text v-if="timeFlag" class="time">
							{{timeCount}}
						</text>
						<text @tap="getCode" v-else class="getCode">
							获取验证码
						</text>
					</view>
				</view>
				<view class="line3"></view>
			</view>
		</view>

		<view class="login-list-4">
			<button type="default" @tap="loginBtn" :loading="loading">登录</button>
		</view>
		<view v-if="accountActive==2" class="box d-jc-c login-list-5">
			<view class="">
				<text @tap='forgetPassword()'>忘记密码</text>
			</view>
			<view class="lin2">
			</view>
			<view @tap="regist()" class="">
				<text>注册账号</text>
			</view>
		</view>
		<view v-if="accountActive==1" class="box d-jc-c login-list-5">
			<view class="">
				<text class="accountActive">没有账号？</text>
				<text @tap="regist()">立即注册</text>
			</view>

		</view>

	</view>


</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				showPhoneIcon: false,
				type: 'text',
				showPassword: false,
				parameter: {
					account: '',
					password: '',
					type: '2',
					verification: '',
					phone: '',
					// verificationType: '1',
					// clientId:uni.getStorageSync("clientId")
				},
				loading: false,
				accountActive: 2,
				timeFlag: false,
				totalTime: 59,
				timeCount: '',
				certificate:''

			}
		},
		onBackPress(e) {
			this.backStep()
			return true;

		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login','setUserInfo','setLoginState']),
			backStep() {
				uni.switchTab({
					url: 'user'
				})
			},
			forgetPassword() {
				uni.navigateTo({
					url: 'forgetPassword',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			regist() {
				uni.navigateTo({
					url: './userRegist',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getCode() {
				this.$api_common.getVerificationCode({
					type:1,
					phone:this.parameter.phone
				}).then((res) => {
					if (res.data.code == 200) {
						this.timeFlag = true
						this.timeCount = this.totalTime + 's'
						let clock = setInterval(() => {
							this.totalTime--
							this.timeCount = this.totalTime + 's'
							if (this.totalTime < 0) { //当倒计时小于0时清除定时器
								clearInterval(clock)
								this.timeFlag = false
								this.totalTime = 59
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
					}
				})



			},
			loginType(type) {
				this.accountActive = type
				this.parameter.type = type

			},
			async loginBtn() {
				console.log(this.parameter)
				let _this = this
				this.loading = true
				this.parameter.type
				this.$api_common.login(this.parameter).then((res) => {
					this.loading = false
					if (res.data.code != 200) {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
						return
					} else if (res.data.code == 200) {
						console.log(res.data.dataMap.token)
						this.certificate = res.data.dataMap.certificate
						if(res.data.dataMap.certificate !== undefined){
							uni.showModal({
							    title: '提示',
							    content: '账号不存在，是否立即注册',
							    success:(res) =>{
							        if (res.confirm) {
										uni.navigateTo({
											url:'userRegist?num='+3+'&certificate='+this.certificate
										})
							            // this.register(this.certificate)
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}else{
							let userInfo ={
								token:res.data.dataMap.token,
								userInfo:{
									
								}
							}
							_this.login(userInfo)
							
							console.log('存入成功'+JSON.stringify(_this.userInfo))
							_this.getUserInfo()
							// uni.setStorageSync('token', res.data.dataMap.token)
							// uni.setStorageSync("userInfo", res.data.dataMap.userInfo)
							// console.log("存入的token ：" + uni.getStorageSync('token'))
							// _this.saveClientInfo()
							this.getunreadnumber()
							// plus.runtime.setBadgeNumber(99);
							uni.showToast({
								title: '登陆成功',
								duration: 500,
								icon: "none"
							});
							setTimeout(function() {
								uni.switchTab({
									url: '../shopList/shopList'
								})
							}, 500);

						}



					}


				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}

				})

			},
			//未读信息

			getunreadnumber(){
				//#ifdef APP-PLUS
				this.$api.getunreadnumber().then((res) => {
					console.log(res.data.dataMap)
					let num = res.data.dataMap
					plus.runtime.setBadgeNumber(num);
				})
				//#endif
			},

			saveClientInfo() {
				// let clientInfo = {
				// 	"clientid":"22e2",
				// 	"appid":" ",
				// 	"appkey":" "
				// }
				//#ifdef APP-PLUS
				var clientInfo = plus.push.getClientInfo();
				let BizClientInfo = {
					"clientid": clientInfo.clientid,
					"appid": clientInfo.appid,
					"appkey": clientInfo.appkey
				}
				// let clientInfo = uni.getStorageSync("clientInfo");
				this.$api.insertUserDevice(BizClientInfo).then((res) => {
					// console.log(JSON.parse(res))

				})
				//#endif


			},
			phoneInput(event) {
				this.phone = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showPhoneIcon = true;
				} else {
					this.showPhoneIcon = false;
				}
			},
			clearIcon() {
				this.parameter.account = ''
				this.parameter.phone = ''
				this.showPhoneIcon = false

			},
			catPassword(showPassword) {
				this.showPassword = !showPassword

			}
		}
	}
</script>

<style scoped>
	.accountActive {
		color: #535353;
	}

	.input-width {
		width: 22rpx;
	}

	.login-list-5 {
		margin-top: 40rpx;
		color: #FF5551;
	}

	.l3 {
		margin-top: 50rpx;
	}

	.line3 {
		background-color: #ebebeb;
		height: 2rpx;
		width: 75%;
		margin: 20rpx auto;

	}

	.time {
		border-radius: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		width: 180rpx;
		margin-left: 134rpx;
		color: #b1b1b1;
	}

	.getCode {
		border-radius: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		width: 180rpx;
		background-color: #FF5551;
		margin-left: 134rpx;
		color: #FFFFFF;
	}

	.input-code {
		width: 200rpx;
	}

	.input {
		width: 490rpx;
	}

	.lin2 {
		background-color: #b5b5b5;
		width: 5rpx;
		margin: 6px 30rpx;
		border-radius: 20rpx;
		height: 30rpx;

	}

	.login-list-4 button {
		margin-top: 40rpx;
		width: 600rpx;
		background-color: #FF5551;
		border-radius: 50rpx;
		color: #FFFFFF;

	}

	.iconshoujihao,
	.iconmima {
		text-align: right;
		margin-right: 20rpx;
		color: #FF5551;
	}

	.login-list-3 {
		width: 750rpx;
		margin: 5px auto;
	}

	.line {
		width: 5rpx;
		height: 100%;
		background-color: #007AFF;
	}

	.login-list-2 {
		width: 500rpx;
		margin: 0 auto;
		color: #b9b9b9;

	}

	.login-list-2 view:nth-child(1) {
		text-align: right;
		font-size: 35rpx;

	}

	.login-list-2 view:nth-child(3) {
		text-align: left;
		font-size: 35rpx;
	}

	.login-list-2 view:nth-child(2) {
		width: 1rpx;
		height: 40rpx;
		background-color: #a3a3a3;
		border-radius: 10rpx;
		margin: 10rpx 40rpx;
	}

	.login-list-1 image {
		width: 256rpx;
		height: 256rpx;
		margin-top: 90rpx;
	}
</style>
